<!--
 描述: 右下
-->

<template>
    <div class="wrap-container sn-container">
        <div class="sn-content">
            <div class="sn-title">村级农民人均年纯收入分布</div>
            <div class="sn-body">
                <div class="wrap-container">
                    <div class="chartsdom" id="chart_polo_cun_two"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: "waterPolocuntwo",
        data() {
            return {
                baseUrl: domain.testUrl,
                baseName: ':name'
            }
        },
        mounted() {
            this.getEchart();
        },
        methods: {
            getEchart(param) {
                if (param != undefined && param != null) {
                    this.baseUrl = localStorage.getItem('baseUrl');
                    this.baseName = param;
                }
                var url = this.baseUrl + "memberDatav/findOrganizationByNation?name="+ this.baseName;
                var data = [];
                axios.post(url).then((response) => {
                    response.data.forEach((res) => {
                        data.push({
                            value: res.y,
                            name: res.x
                        });
                    })
                    let myChart = echarts.init(document.getElementById('chart_polo_cun_two'));




                    let option = {
                        // backgroundColor: '#031845',
                        // title:{
                        //     text:"123",
                        //     left:'center',
                        //     top:'45%',
                        //     textStyle:{
                        //         color:"#FFF",
                        //         fontSize:"80px",

                        //     }
                        // },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{b} : {d}% <br/> {c}"
                        },
                        //  graphic: {
                        //  elements: [
                        //         {
                        //          type: 'text',
                        //          left: 'center', // 相对父元素居中
                        //          top: 'center',  // 相对父元素上下的位置
                        //          style: {
                        //              fill: '#FFF',
                        //               text: ['357'],
                        //               zlevel:"100",
                        //               font: '80px Arial Normal',
                        //                  }
                        //         }]
                        //       },
                        //  title: {
                        //     text:'总考生数',
                        //     left:'center',
                        //     top:'center',
                        //     padding:[24,0],
                        //     textStyle:{
                        //         color:'#fff',
                        //         fontSize:18*scale,
                        //         align:'center'
                        //     }
                        // },
                        title: {
                            text: '3246',
                            subtext: '重点人员(人)',
                            x: 'center',
                            y: '43%',
                            textStyle: {
                                fontSize: 10,
                                fontWeight: 'normal',
                                color: '#00FFFF',
                            },
                            subtextStyle: {
                                fontSize: 10,
                                fontWeight: 'normal',
                                align:"center",
                                color:'#CCCCCC'
                            },
                        },
                        series: [{
                            type: 'pie',
                            radius: ['50', '110'],
                            center: ['50%', '50%'],
                            color: ['#80C269', '#00FFFF', '#0090F1', '#FFA800','#4658F6'],
                            itemStyle:{
                                normal: {
                                    borderWidth: 5,
                                    borderColor: '#051f47',
                                }
                            },
                            data: [{
                                value: 27,
                                name: '严重不满人员'
                            },
                                {
                                    value: 30,
                                    name: '关注群体'
                                },
                                {
                                    value: 24,
                                    name: '散居外国人'
                                },
                                {
                                    value: 27,
                                    name: '上访重点人'
                                },
                                {
                                    value: 27,
                                    name: '重点精神病'
                                }

                            ],
                            labelLine: {
                                normal: {
                                    show: true,
                                    length: 20,
                                    length2: 10,
                                    lineStyle: {
                                        color: '#CCCCCC',
                                        width: 2
                                    }
                                }
                            },
                            label: {
                                normal: {
                                    formatter: '{b|{b}}\n{hr|}\n{c|{c}%}',
                                    rich: {
                                        b: {
                                            fontSize: 12,
                                            color: '#FFF',
                                            align: 'left',
                                            padding: 1
                                        },
                                        hr: {
                                            borderColor: '#CCCCCC',
                                            width: '100%',
                                            borderWidth: 1,
                                            height: 0
                                        },
                                        c: {
                                            fontSize: 12,
                                            align: 'center',
                                            padding: 1,
                                            color:'#00EDED'
                                        }
                                    }
                                }
                            }
                        }

                        ]
                    };




                    myChart.setOption(option, true);
                    window.addEventListener('resize', () => {
                        myChart.resize();
                    });
                }).catch(function (response) {
                    console.log(response); //发生错误时执行的代码
                });
            }
        },
    };
</script>
<style lang="scss" scoped>
    .sn-container {
        left: 1400px;
        top: 380px;
        width: 480px;
        height: 30%;
        .chartsdom {
            width: 100%;
            height: 100%;
        }
    }
</style>